<script setup>
import { ref, shallowRef, onMounted } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import LessonNavigation from './components/LessonNavigation.vue'

// 动态导入所有Demo组件
const demoComponents = shallowRef({})
const currentLesson = ref('home')

// 存储PropsDemo的props数据
const propsDemoData = {
  first: {
    title: "Vue 3 Props 演示", 
    quantity: 10, 
    isVisible: true 
  },
  second: {
    title: "Vue 3 Props 演示（带描述）", 
    description: "这是第二个PropsDemo组件实例",
    quantity: 20, 
    isVisible: false 
  }
}

// 组件名称映射配置
const componentDisplayNames = {
  'InterpolationDemo': '插值表达式',
  'PropsDemo': 'Props传值',
  'AttributeBindingDemo': '属性绑定',
  'ConditionalRenderingDemo': '条件渲染'
}

// 获取组件显示名称
const getDisplayName = (componentName) => {
  return componentDisplayNames[componentName] || componentName.replace('Demo', '')
}

// 获取课程列表（基于已加载的组件）
const getLessons = () => {
  const lessons = [{ id: 'home', name: '首页' }]
  
  Object.keys(demoComponents.value).forEach(name => {
    if (name !== 'HelloWorld') {
      lessons.push({
        id: name.toLowerCase().replace('demo', '') + 'demo',
        name: getDisplayName(name),
        component: name
      })
    }
  })
  
  return lessons
}

// 动态导入所有以Demo.vue结尾的组件
const loadDemoComponents = async () => {
  // 使用import.meta.glob动态导入所有Demo组件
  const modules = import.meta.glob('./components/*Demo.vue')
  
  for (const path in modules) {
    try {
      const module = await modules[path]()
      const componentName = path.split('/').pop().replace('.vue', '')
      demoComponents.value[componentName] = module.default
    } catch (error) {
      console.error(`Failed to load component from ${path}:`, error)
    }
  }
}

const handleLessonChange = (lessonId) => {
  currentLesson.value = lessonId
}

// 为不同组件提供props
const getComponentProps = (componentName, instance = 'first') => {
  // 特殊处理PropsDemo组件
  if (componentName === 'PropsDemo') {
    return propsDemoData[instance] || propsDemoData.first
  }
  // 其他组件不需要额外的props
  return {}
}

onMounted(() => {
  loadDemoComponents()
})
</script>

<template>
  <div class="app-container">
    <div class="logo-container">
      <a href="https://vite.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
      </a>
    </div>
    
    <div class="content-container">
      <LessonNavigation 
        class="navigation"
        :current-lesson="currentLesson" 
        :lessons="getLessons()"
        @lesson-change="handleLessonChange"
      />
      
      <div class="content">
        <!-- 首页 -->
        <div v-if="currentLesson === 'home'">
          <HelloWorld msg="Vite + Vue" />
        </div>
        
        <!-- Props传值示例（特殊处理，显示两个实例） -->
        <div v-if="currentLesson === 'propsdemo'">
          <component 
            :is="demoComponents.PropsDemo" 
            v-bind="propsDemoData.first"
          />
          
          <component 
            :is="demoComponents.PropsDemo" 
            v-bind="propsDemoData.second"
          />
        </div>
        
        <!-- 动态渲染其他Demo组件 -->
        <div 
          v-for="(component, name) in demoComponents" 
          :key="name"
          v-show="currentLesson === name.toLowerCase().replace('demo', '') + 'demo' && name !== 'PropsDemo'"
        >
          <component 
            :is="component" 
            v-bind="getComponentProps(name)" 
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 20px 290px; /* 左边距留出导航栏空间 */
}

.logo-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 20px 0;
  background-color: white;
  z-index: 100;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.content-container {
  display: flex;
  gap: 20px;
  margin-top: 120px; /* 上边距留出logo区域空间 */
}

.navigation {
  position: fixed;
  left: 20px;
  top: 120px; /* 位于logo下方 */
  bottom: 20px;
  width: 250px;
  overflow-y: auto;
}

.content {
  flex: 1;
}

@media (max-width: 768px) {
  .app-container {
    padding-left: 20px;
  }
  
  .content-container {
    flex-direction: column;
  }
  
  .navigation {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    height: auto;
  }
}
</style>